<script lang="ts">
import {defineComponent, PropType} from 'vue'
import { VuePdf, createLoadingTask } from 'vue3-pdfjs/esm';
import { VuePdfPropsType } from 'vue3-pdfjs/components/vue-pdf/vue-pdf-props'; // Prop type definitions can also be imported
import { PDFDocumentProxy } from 'pdfjs-dist/types/src/display/api';
// @ts-ignore
export default defineComponent({
  name: "ShowPdf",
  props: {
    src: {
      type: String as PropType<VuePdfPropsType['src']>,
      default: ()=> ''
    }
  },
  components: {
    VuePdf
  },
  watch: {
    src: {
      immediate: true,
      handler(val) {
        if(val) {
          const loadingTask = createLoadingTask(val)
          loadingTask.promise.then((pdf: PDFDocumentProxy) => {
            this.numOfPages = pdf.numPages
          })
        }
      }
    }
  },
  data() {
    return {
      numOfPages: 0,
    };
  }
})
</script>

<template>
  <div class="ShowPdf">
    <VuePdf v-for="page in numOfPages" :key="page"
            :src="src" :page="page" />
  </div>
</template>

<style scoped lang="scss">
.ShowPdf{
}
</style>
